<template>
  <div class="app-container">
    <u-page title="任务列表">
      <div slot="header">
        <el-button type="primary" icon="el-icon-plus" @click="handleOpen(newForm)">
          新建任务
        </el-button>
      </div>
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="任务名称" prop="name">
            <el-input v-model="listQuery.name" placeholder="请输入任务名称" clearable style="width: 170px" />
          </el-form-item>
          <el-form-item label="任务编号" prop="code">
            <el-input v-model="listQuery.code" placeholder="请输入任务编号" clearable style="width: 170px" />
          </el-form-item>
          <el-form-item label="任务类型" prop="taskType">
            <el-select v-model="listQuery.taskType" placeholder="选择任务类型" style="width:170px;" clearable>
              <el-option label="手机短信" value="sms" />
              <el-option label="公众号通知" value="wechat" />
              <el-option label="发放通联券" value="coupon" />
            </el-select>
          </el-form-item>
          <el-form-item label="申请时间" prop="createTime">
            <u-date-time-picker v-model="daterange" clearable @change="dateFormat" />
          </el-form-item>
          <el-form-item label="申请人" prop="createdBy">
            <el-input v-model="listQuery.createdBy" placeholder="请输入申请人" clearable style="width: 170px" />
          </el-form-item>
          <el-form-item prop="inDeptId" label="申请部门">
            <el-cascader
              v-model="listQuery.inDeptId"
              width="480"
              :options="inDeptList"
              :props="{value:'value', label:'label', disabled:true , children:'children', checkStrictly: true}"
              placeholder="请选择部门"
              :show-all-levels="false"
              clearable
              @change="handleCascaderChange"
            />
          </el-form-item>
          <el-form-item label="任务状态" prop="status">
            <el-select v-model="listQuery.status" placeholder="选择任务状态" style="width:170px;" clearable>
              <el-option label="未提交" value="-2" />
              <el-option label="审核中" value="0" />
              <el-option label="执行中" value="1" />
              <el-option label="驳回" value="2" />
              <el-option label="执行完毕" value="3" />
              <el-option label="已终止" value="4" />
              <el-option label="撤销" value="-1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"

      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">详情</el-button>
              <el-button type="text">日志</el-button>
            </template>
          </el-table-column>
        </template>
        <template v-slot:left>
          <el-table-column type="expand">
            <template slot-scope="{row}">
              <table v-if="row.oplogList.length>0" style="margin-left:20px;background-color: #F5F7FA;">
                <!-- 表头 -->
                <tr style="font-weight: bold;">
                  <td>操作时间</td>
                  <td>操作人</td>
                  <td>操作</td>
                  <td style="width:400px;">备注</td>
                </tr>
                <!-- 数据行 -->
                <tr v-for="log in row.oplogList" :key="log.id">
                  <td>{{ log.createdAt | formatDate }}</td>
                  <td>{{ log.createdBy }}</td>
                  <td>{{ log.type }}</td>
                  <td>{{ log.remark }}</td>
                </tr>
              </table>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>

    <u-dialog :title="textMap[dialogStatus]" :footer="dialogStatus === 'create'" :show.sync="dialogFormVisible" width="1080px" confirm-button-text="保 存" @confirm="handleCreate">
      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="120px">
        <el-form-item label="任务名称" prop="name" style="margin-left: -50px;">
          <el-input v-model="dataForm.name" :readonly="justRead" placeholder="请输入任务名称" clearable style="width: 350px" />
        </el-form-item>
        <el-form-item label="场景描述" prop="notes" style="margin-left: -50px;">
          <el-input v-model="dataForm.notes" :readonly="justRead" type="textarea" placeholder="请输入任务执行场景描述" clearable style="width: 350px" rows="3" />
        </el-form-item>

        <el-tabs v-model="active">
          <el-tab-pane label="任务类型" name="first">
            <el-form-item label="选择类型" prop="taskTypeList">
              <el-checkbox-group v-model="dataForm.taskTypeList" :disabled="justRead">
                <el-checkbox label="sms">手机短信</el-checkbox>
                <el-checkbox label="wechat">公众号通知</el-checkbox>
                <el-checkbox label="coupon">发放通联券</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="时间周期" name="second">
            <el-form-item label="时间类型" prop="timeType">
              <el-radio-group v-model="dataForm.timeType" :disabled="justRead">
                <el-radio :label="0">定期执行</el-radio>
                <el-radio :label="1">单次执行</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="dataForm.timeType==1" label="执行时间" prop="exeTime">
              <el-date-picker
                v-model="dataForm.exeTime"
                :disabled="justRead"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择执行时间"
              />
            </el-form-item>
            <el-form-item v-else label="执行周期" prop="exeCycle">
              <div class="item">
                <el-select v-model="dataForm.selectedPeriod" :disabled="justRead" placeholder="选择执行周期" style="width:100px;">
                  <el-option label="每天" value="day" />
                  <!--                  <el-option label="N天" value="days" />-->
                  <!--                  <el-option label="每小时" value="hour" />-->
                  <!--                  <el-option label="N小时" value="hours" />-->
                  <!--                  <el-option label="N分钟" value="minutes" />-->
                  <el-option label="每星期" value="week" />
                  <el-option label="每月" value="month" />
                  <el-option label="每年" value="year" />
                </el-select>
              </div>
              <div class="item">
                <el-select v-if="dataForm.selectedPeriod === 'week'" v-model="dataForm.selectedWeekday" :disabled="justRead" placeholder="选择星期几" style="width:80px;">
                  <el-option label="周一" value="Monday" />
                  <el-option label="周二" value="Tuesday" />
                  <el-option label="周三" value="Wednesday" />
                  <el-option label="周四" value="Thursday" />
                  <el-option label="周五" value="Friday" />
                  <el-option label="周六" value="Saturday" />
                  <el-option label="周日" value="Sunday" />
                </el-select>
              </div>
              <div v-if="dataForm.selectedPeriod === 'year'" class="item">
                <el-input-number v-model="dataForm.monthInterval" :disabled="justRead" :min="1" :max="12" label="月" :controls-position="'right'" style="width:80px;" />月
              </div>
              <div v-if="dataForm.selectedPeriod === 'days'" class="item">
                <el-input-number v-model="dataForm.dayInterval" :disabled="justRead" :min="1" label="天" :controls-position="'right'" style="width:80px;" />天
              </div>
              <div v-if="dataForm.selectedPeriod === 'month'|| dataForm.selectedPeriod === 'year'" class="item">
                <el-input-number v-model="dataForm.dayInterval" :disabled="justRead" :min="1" :max="31" label="日" :controls-position="'right'" style="width:80px;" />日
              </div>
              <div v-if="['day', 'days', 'hours', 'week', 'month', 'year'].includes(dataForm.selectedPeriod)" class="item">
                <el-input-number v-model="dataForm.hourInterval" :disabled="justRead" :min="0" :max="23" label="小时" :controls-position="'right'" style="width:80px;" />小时
              </div>
              <div class="item">
                <el-input-number v-model="dataForm.minuteInterval" :disabled="justRead" :min="0" :max="59" label="分钟" :controls-position="'right'" style="width:80px;" />分钟
              </div>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="内容设置" name="third">
            <el-alert title="收费标准" type="success" show-icon :closable="false" style="margin-bottom: 20px;">
              <span style="font-weight: bold; font-size: 12px;">
                1.手机短信：每 {{fee.smsMax}} 个字符计1条短信，每条短信收费 {{fee.smsFee}} 元。
              </span>
            </el-alert>
            <div v-if="dataForm.taskTypeList.includes('sms')">
              <!--              <el-divider>手机短信</el-divider>-->
              <!--              <el-form-item label="短信模板选择" prop="smsId">-->
              <!--                <el-form :disabled="justRead">-->
              <!--                  <sms v-model="dataForm.smsId" @change="changeSms" />-->
              <!--                </el-form>-->
              <!--              </el-form-item>-->
              <el-form-item label="短信模板选择" prop="smsId">
                <el-form :disabled="justRead">
                  <sms v-model="dataForm.smsId" width="500px" />
                </el-form>
              </el-form-item>
            </div>
            <div v-if="dataForm.taskTypeList.includes('wechat')">
              <!--              <el-divider>公众号通知</el-divider>-->
            </div>
            <div v-if="dataForm.taskTypeList.includes('coupon')">
              <!--              <el-divider>发放通联券</el-divider>-->
              <el-form-item label="通联券选择" prop="couponId">
                <el-form :disabled="justRead">
                  <ues-coupon v-model="dataForm.couponId" multiple @change="changeCouponList" />
                </el-form>
              </el-form-item>
            </div>
          </el-tab-pane>

          <el-tab-pane label="执行对象" name="fourth">
            <el-form-item label="指定用户" prop="ifWhiteList">
              <el-radio-group v-model="dataForm.ifWhiteList" :disabled="justRead">
                <el-radio :label="false">不启动</el-radio>
                <el-radio :label="true">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="dataForm.ifWhiteList">
              <el-form-item :model="dataForm" />
              <el-form-item prop="textData" label="手机号码">
                <el-input v-model="dataForm.textData" :readonly="justRead" type="textarea" rows="5" multiple placeholder="格式: 手机号+换行或者英文逗号" clearable class="textarea" @blur="handleBlur" />
              </el-form-item>
              <el-form-item>
                <div style="float: right;" class="numberV">{{ txtVal }}</div>
                <el-upload
                  ref="upload2"
                  style="float: left;margin-right: 10px;"
                  action="/"
                  :auto-upload="false"
                  accept=".txt,.xlsx,.xls"
                  :before-upload="beforeUpload"
                  :on-change="handleChange"
                  :show-file-list="false"
                  :disabled="dataForm.textData.length !== 0"
                  :default-file-list="dataForm.textData"
                ><el-button type="primary" size="mini" icon="el-icon-upload" :disabled="dataForm.textData.length !== 0">导入</el-button>
                </el-upload>
                <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="justRead" @click="handleClean">清空</el-button>
              </el-form-item>
              <el-form-item v-if="showWrong === true" label="错误">
                <el-input v-model="wrongnum" type="textarea" placeholder="" readonly show-word-limit class="textarea" />
              </el-form-item>
            </div>
            <div v-else>
              <!--当前会员等级-->
              <el-form-item label="会员卡别" prop="cardTypeList">
                <el-checkbox-group v-model="dataForm.cardTypeList" :disabled="justRead">
                  <el-checkbox label="104">微会员</el-checkbox>
                  <el-checkbox label="101">金卡</el-checkbox>
                  <el-checkbox label="102">红宝石卡</el-checkbox>
                  <el-checkbox label="103">钻石卡</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <!--当前会员性别-->
              <el-form-item label="会员性别" prop="sex">
                <el-radio-group v-model="dataForm.sex" :disabled="justRead">
                  <el-radio :label="-1">不限</el-radio>
                  <el-radio :label="0">男</el-radio>
                  <el-radio :label="1">女</el-radio>
                </el-radio-group>
              </el-form-item>

              <!--当前会员年龄-->
              <el-form-item label="会员年龄" prop="ageLimit" style="display: inline-block;">
                <el-radio-group v-model="dataForm.ageLimit" :disabled="justRead">
                  <el-radio :label="false">不限</el-radio>
                  <el-radio :label="true">限制</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="dataForm.ageLimit" prop="ageStart" style="display: inline-block; margin-left: -100px;">
                <el-input v-model="dataForm.ageStart" style="width: 60px;" :readonly="justRead" />~
              </el-form-item>
              <el-form-item v-if="dataForm.ageLimit" prop="ageEnd" style="display: inline-block; margin-left: -120px;">
                <el-input v-model="dataForm.ageEnd" style="width: 60px;" :readonly="justRead" />
              </el-form-item>

              <!--注册时间--><br>
              <el-form-item label="注册时间" prop="inputDateLimit">
                <el-radio-group v-model="dataForm.inputDateLimit" :disabled="justRead">
                  <el-radio label="noLimit">不限</el-radio>
                  <el-radio label="lastMonth">上月</el-radio>
                  <el-radio label="lastWeek">上周</el-radio>
                  <el-radio label="yesterday">昨日</el-radio>
                  <el-radio label="range">区间</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="dataForm.inputDateLimit === 'range'" prop="inputDateStart" style="display: inline-block;">
                <el-date-picker
                  v-model="dataForm.inputDateStart"
                  :disabled="justRead"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
              <el-form-item v-if="dataForm.inputDateLimit === 'range'" prop="inputDateEnd" style="display: inline-block;margin-left: -120px;">
                至<el-date-picker
                  v-model="dataForm.inputDateEnd"
                  :disabled="justRead"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>

              <!--其他条件-->
              <el-form-item label="其他条件" prop="other">
                <el-radio-group v-model="other" @change="handleRadioChange">
                  <el-radio-button :label="1">剩余积分<span v-if="dataForm.benefitLimit" style="color: red;font-weight: bold">√</span></el-radio-button>
                  <el-radio-button :label="2">消费数据<span v-if="dataForm.consumptionLimit" style="color: red;font-weight: bold">√</span></el-radio-button>
                  <el-radio-button :label="3">最近消费时间<span v-if="dataForm.lastConsumptionTimeLimit" style="color: red;font-weight: bold">√</span></el-radio-button>
                  <el-radio-button :label="4">升级会员<span v-if="dataForm.upgradeLimit" style="color: red;font-weight: bold">√</span></el-radio-button>
                  <el-radio-button :label="5">会员生日<span v-if="dataForm.birthdayLimit" style="color: red;font-weight: bold">√</span></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <!--1.剩余积分-->
              <div v-show="other === 1">
                <div v-if="dataForm.benefitLimit">
                  <el-form-item prop="benefitStart" style="display: inline-block;">
                    截止使用此规则时，剩余积分区间：<el-input v-model="dataForm.benefitStart" style="width: 100px;" :readonly="justRead" />
                  </el-form-item>
                  <el-form-item prop="benefitEnd" style="display: inline-block; margin-left: -120px;">
                    元 ~ <el-input v-model="dataForm.benefitEnd" style="width: 100px;" :readonly="justRead" />
                  </el-form-item>
                </div>
                <el-form-item label="限制开关" style="margin-left: 70px;">
                  <el-switch v-model="dataForm.benefitLimit" :disabled="justRead" />
                </el-form-item>
              </div>
              <!--2.消费数据-->
              <div v-show="other === 2" style="margin-left: 70px;">
                <div v-if="dataForm.consumptionLimit">
                  <!--消费时间段-->
                  <el-form-item label="消费时间" prop="consumptionTime">
                    <el-radio-group v-model="dataForm.consumptionTime" :disabled="justRead">
                      <el-radio label="lastMonth">上月</el-radio>
                      <el-radio label="lastWeek">上周</el-radio>
                      <el-radio label="yesterday">昨日</el-radio>
                      <el-radio label="range">区间</el-radio>
                      <!--                      <el-radio label="relegation">今日起倒推11月(保级提醒)</el-radio>-->
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="dataForm.consumptionTime === 'range'" prop="consumptionTimeStart" style="display: inline-block;">
                    <el-date-picker
                      v-model="dataForm.consumptionTimeStart"
                      :disabled="justRead"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                  <el-form-item v-if="dataForm.consumptionTime === 'range'" prop="consumptionTimeEnd" style="display: inline-block;margin-left: -120px;">
                    至
                    <el-date-picker
                      v-model="dataForm.consumptionTimeEnd"
                      :disabled="justRead"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                  <!--累计消费金额-->
                  <br>
                  <el-form-item label="消费金额" prop="consumptionAmountStart" style="display: inline-block;">
                    区间：<el-input v-model="dataForm.consumptionAmountStart" style="width: 80px;" :readonly="justRead" />
                  </el-form-item>
                  <el-form-item prop="consumptionAmountEnd" style="display: inline-block; margin-left: -120px;">
                    ~ <el-input v-model="dataForm.consumptionAmountEnd" style="width: 80px;" :readonly="justRead" /> 元
                  </el-form-item>
                  <!--累计消费排名-->
                  <el-form-item label="消费排名" prop="consumptionRanking">
                    前 <el-input v-model="dataForm.consumptionRanking" style="width: 80px;" :readonly="justRead" /> 名
                  </el-form-item>
                  <!--消费楼层-->
                  <el-form-item label="消费楼层" prop="treeSelection">
                    <div class="tree-container">
                      <el-tree
                        ref="tree"
                        show-checkbox
                        :data="treeData"
                        :props="treeProps"
                        node-key="id"
                        :default-expand-all="false"
                        width="200"
                        @check-change="handleGetCheckedIds"
                      />
                    </div>
                  </el-form-item>
                </div>

                <el-form-item label="限制开关" style="margin-left: 0px;">
                  <el-switch v-model="dataForm.consumptionLimit" :disabled="justRead" />
                </el-form-item>
              </div>
              <!--            <el-button @click="handleGetCheckedIds">获取已勾选的 ID</el-button>-->
              <!--3.最近消费时间-->
              <div v-show="other === 3">
                <div v-if="dataForm.lastConsumptionTimeLimit">
                  <el-form-item prop="lastConsumptionTimeStart" style="display: inline-block;">
                    最近一次消费时间：<el-date-picker
                      v-model="dataForm.lastConsumptionTimeStart"
                      :disabled="justRead"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                  <el-form-item prop="lastConsumptionTimeEnd" style="display: inline-block;margin-left: -120px;">
                    至<el-date-picker
                      v-model="dataForm.lastConsumptionTimeEnd"
                      :disabled="justRead"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                </div>
                <el-form-item label="限制开关" style="margin-left: 70px;">
                  <el-switch v-model="dataForm.lastConsumptionTimeLimit" :disabled="justRead" />
                </el-form-item>
              </div>
              <!--4.升级会员-->
              <div v-show="other === 4" style="margin-left: 70px;">
                <div v-if="dataForm.upgradeLimit">
                  <!--升级时间段-->
                  <el-form-item label="升级时间" prop="upgradeTime">
                    <el-radio-group v-model="dataForm.upgradeTime" :disabled="justRead">
                      <el-radio label="lastMonth">上月</el-radio>
                      <el-radio label="lastWeek">上周</el-radio>
                      <el-radio label="yesterday">昨日</el-radio>
                      <el-radio label="range">区间</el-radio>
                      <!--                      <el-radio label="relegation">今日起倒推11月当天(保级提醒)</el-radio>-->
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="dataForm.upgradeTime === 'range'" prop="upgradeTimeStart" style="display: inline-block;">
                    <el-date-picker
                      v-model="dataForm.upgradeTimeStart"
                      :disabled="justRead"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                  <el-form-item v-if="dataForm.upgradeTime === 'range'" prop="upgradeTimeEnd" style="display: inline-block;margin-left: -120px;">
                    至
                    <el-date-picker
                      v-model="dataForm.upgradeTimeEnd"
                      :disabled="justRead"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                  <!--目标卡别-->
                  <el-form-item label="目标卡别" prop="upgradeCardTypeList">
                    <el-checkbox-group v-model="dataForm.upgradeCardTypeList" :disabled="justRead">
                      <el-checkbox label="101">金卡</el-checkbox>
                      <el-checkbox label="102">红宝石卡</el-checkbox>
                      <el-checkbox label="103">钻石卡</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </div>
                <el-form-item label="限制开关" style="margin-left: 0px;">
                  <el-switch v-model="dataForm.upgradeLimit" :disabled="justRead" />
                </el-form-item>
              </div>
              <!--5.会员生日-->
              <div v-show="other === 5" style="margin-left: 70px;">
                <div v-if="dataForm.birthdayLimit">
                  <el-form-item label="会员生日" prop="birthday">
                    <el-radio-group v-model="dataForm.birthday" :disabled="justRead">
                      <el-radio label="thisMonth">当月</el-radio>
                      <el-radio label="nextMonth">下月</el-radio>
                      <el-radio label="today">当日</el-radio>
                      <el-radio label="tomorrow">明日</el-radio>
                      <el-radio label="afterTomorrow">后日</el-radio>
                      <el-radio label="range">区间</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="dataForm.birthday === 'range'" prop="birthdayStart" style="display: inline-block;">
                    <el-date-picker
                      v-model="dataForm.birthdayStart"
                      :disabled="justRead"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>

                  <el-form-item v-if="dataForm.birthday === 'range'" prop="birthdayEnd" style="display: inline-block;margin-left: -120px;">
                    至
                    <el-date-picker
                      v-model="dataForm.birthdayEnd"
                      :disabled="justRead"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                </div>
                <el-form-item label="限制开关" style="margin-left: 0px;">
                  <el-switch v-model="dataForm.birthdayLimit" :disabled="justRead" />
                </el-form-item>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="扣款相关" name="fifth">
            <el-row>
              <el-col :span="6">
                <el-form-item label="扣费部门" prop="deptid" style="padding-top: 10px">
                  <el-cascader
                    ref="depts"
                    v-model="dataForm.deptid"
                    :options="deptList"
                    :show-all-levels="false"
                    :disabled="justRead"
                    @change="handledeptChanged"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="费用承担方" prop="contracttype">
              <el-select v-model="dataForm.contracttype" placeholder="请选择合同类型" :disabled="justRead" @change="handleContracttypeChanged">
                <el-option v-for="item in contractTypes" :key="item.id" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="!(dataForm.contracttype==='公司承担')" label="付款方式" prop="paytype">
              <el-radio-group v-model="dataForm.paytype" :disabled="justRead">
                <el-radio label="账扣" :disabled="dataForm.contracttype==='第三方承担'" />
                <el-radio label="现金缴款" />
              </el-radio-group>
            </el-form-item>
            <div v-if="!(dataForm.contracttype==='公司承担')">
              <el-row :hidden="dataForm.contracttype==='第三方承担'">
                <el-col :span="7" style="padding-top: 8px">
                  <el-form-item label="厂商编码" prop="firmcode" :rules="{required: dataForm.contracttype!=='第三方承担', message: '请填写厂商编号', trigger: 'blur' }">
                    <el-input v-model="dataForm.firmcode" style="width: 200px" :disabled="justRead" @change="hdlfirmcode" />
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-top: 6px;margin-left: 20px;">
                  <el-button v-if="!justRead" type="text" @click="handleFCInfos">[厂商编号及合同编号]</el-button>
                </el-col>
              </el-row>
              <el-form-item label="厂商名称" prop="firmname">
                <el-input v-model="dataForm.firmname" style="width: 400px" :disabled="justRead" />
              </el-form-item>
              <div v-if="!(dataForm.contracttype==='第三方承担')">
                <el-form-item label="合同号" prop="hth" :rules="{required: dataForm.contracttype==='厂商承担', message: '请填写合同号', trigger: 'blur' }">
                  <el-input v-model="dataForm.hth" style="width: 400px" :disabled="true" />
                </el-form-item>
                <el-form-item label="专柜编号" prop="zgid" :rules="{required: dataForm.contracttype==='厂商承担', message: '请填写专柜编号', trigger: 'blur' }" :hidden="dataForm.contracttype==='第三方承担'">
                  <el-input v-model="dataForm.zgid" style="width: 400px" :disabled="true" />
                </el-form-item>
                <el-form-item label="专柜名称" prop="zgname" :rules="{required: dataForm.contracttype==='厂商承担', message: '请填写专柜名称', trigger: 'blur' }" :hidden="dataForm.contracttype==='第三方承担'">
                  <el-input v-model="dataForm.zgname" style="width: 400px" :disabled="true" />
                </el-form-item>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!--        <el-button type="primary" @click="test">测试</el-button>-->
      </el-form>
      <div v-if="dialogStatus === 'update'" style="padding-top: 40px;text-align: right;-webkit-box-sizing: border-box;box-sizing: border-box;">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <!--        <el-button v-if="[-2,-1,2].includes(dataForm.status)" type="primary" @click="cancel">修 改</el-button>-->
        <el-button v-if="[-2,-1,2].includes(dataForm.status)" type="primary" :disabled="!justRead" @click="justRead = false">修 改</el-button>
        <el-button v-if="dataForm.status === 0" type="primary" @click="abate(dataForm.code)">撤销申请</el-button>
        <el-button v-if="dataForm.status === 1" type="primary" @click="stopTask(dataForm.code)">终止任务</el-button>
        <el-button v-if="[-2,-1,2].includes(dataForm.status)" type="primary" :disabled="justRead" @click="mySave">保 存</el-button>
        <el-button v-if="[-2,-1,2].includes(dataForm.status)" type="primary" :disabled="(!justRead)||dataForm.status===2" @click="myApply(dataForm.code)">发起申请</el-button>
      </div>
    </u-dialog>
    <el-drawer
      title="厂商合同信息"
      :visible.sync="fcInfotable"
      direction="rtl"
      size="70%"
    >
      <div style="margin-top: 5px;padding-left: 10px">
        <el-row>
          <el-col :span="8">
            <el-input v-model="keyWord" placeholder="请输入内容" class="input-with-select" @input="keyWordChange()" />
          </el-col>
          <el-col :span="12">
            <div style="font-size:12px;padding-top: 7px;">（可输入厂商编号、或厂商名称、或专柜编号、或专柜名称的部份文字进行筛选）</div>
          </el-col>
        </el-row>
      </div>
      <u-table
        :data="fcInfoData"
        :options="listOptions"
        :columns="fcInfocolumns"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="getFirm(row)">选择</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </el-drawer>
  </div>

</template>

<script>
import uesCoupon from '@/components/coupon/uesCoupon'
// import sms from '@/components/mall/sms'
import sms from '@/components/module/sms'
export default {
  components: {
    uesCoupon,
    sms
  },
  data() {
    return {
      // 扣款相关
      // 合同类型数组
      contractTypes: [{ id: '1', label: '公司承担', value: '公司承担' }, { id: '2', label: '厂商承担', value: '厂商承担' }, {
        id: '3',
        label: '第三方承担',
        value: '第三方承担'
      }],
      fcInfotable: false,
      // 厂商合同信息
      fcInfoData: [],
      searchfcInfoData: [],
      keyWord: '',
      searchWord: '',
      fcInfocolumns: [
        {
          prop: 'firmcode',
          label: '厂商编号'
        },
        {
          prop: 'firmname',
          label: '厂商名称'
        },
        {
          prop: 'contractcode',
          label: '合同编号'
        },
        {
          prop: 'startdate',
          label: '开始日期',
          render: (h, params) => {
            return h('el-tag', this.$u.timeFormat(new Date(params.row.startdate).getTime(), 'yyyy-mm-dd'))
          }
        },
        {
          prop: 'enddate',
          label: '结束日期',
          render: (h, params) => {
            return h('el-tag', this.$u.timeFormat(new Date(params.row.enddate).getTime(), 'yyyy-mm-dd'))
          }
        },
        {
          prop: 'deptid',
          label: '专柜编号'
        },
        {
          prop: 'dept_name',
          label: '专柜名称'
        },
        {
          prop: 'spsb',
          label: '商标'
        }
      ],
      // 指定名单相关
      txtVal: ' ',
      canEdit: true,
      canSee: false,
      confirm: true,
      showWrong: false,
      wrongnum: [],
      phonenumber: [],
      phonenumber2: [],
      // 其他
      api: this.$u.api.Task,
      feeApi: this.$u.api.TaskFee,
      fee: {},
      textMap: {
        update: '查看任务',
        create: '新建任务'
      },
      dialogStatus: '',
      active: 'first',
      otherCondition: 'o1',
      daterange: [], // 申请时间
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        createTime: [],
        createTime1: '',
        createTime2: ''
      },
      listLoading: false,
      list: [],
      listOptions: {
        stripe: true
      },
      dialogFormVisible: false,
      columns: [
        {
          prop: 'code',
          label: '任务编号',
          sortable: true
        },
        {
          prop: 'name',
          label: '任务名称'
        },
        {
          prop: 'taskType',
          label: '任务类型',
          formatter: (row) => {
            const type = []
            if (row.taskType.includes('sms')) {
              type.push('手机短信')
            }
            if (row.taskType.includes('coupon')) {
              type.push('发放通联券')
            }
            if (row.taskType.includes('wechat')) {
              type.push('公众号通知')
            }
            return type.toString()
          }
        },
        {
          prop: 'notes',
          label: '备注'
        },
        {
          prop: 'createdBy',
          label: '申请人'
        },
        {
          prop: 'createdAt',
          label: '保存/申请时间',
          sortable: true,
          timestamp: true
        },
        {
          prop: 'status',
          label: '当前状态',
          render: (h, params) => {
            if (params.row.status === 0) {
              return h('el-tag', '审核中')
            } else if (params.row.status === 1) {
              return h('el-tag', { props: { type: 'success' }}, '执行中')
            } else if (params.row.status === 2) {
              return h('el-tag', { props: { type: 'danger' }}, '驳回')
            } else if (params.row.status === 3) {
              return h('el-tag', { props: { type: 'warning' }}, '执行完毕')
            } else if (params.row.status === 4) {
              return h('el-tag', { props: { type: 'danger' }}, '已终止')
            } else if (params.row.status === -1) {
              return h('el-tag', { props: { type: 'info' }}, '撤销')
            } else if (params.row.status === -2) {
              return h('el-tag', { props: { type: 'info' }}, '未提交')
            }
          },
          width: '120'
        },
        {
          prop: 'inDeptName',
          label: '申请部门'
        }
      ],
      deptList: [],
      cardTypeList: [
        {
          value: '104',
          label: '微会员'
        }, {
          value: '101',
          label: '金卡'
        }, {
          value: '102',
          label: '红宝石卡'
        }, {
          value: '103',
          label: '钻石卡'
        }
      ],
      dataForm: {
        taskTypeList: [],
        textData: [],
        paytype: ''
      },
      other: 1,
      newForm: {
        textData: [],
        taskTypeList: ['sms'],
        ifWhiteList: true,
        timeType: 0,
        cardTypeList: ['104', '101', '102', '103'],
        ageLimit: false,
        sex: -1,
        upgradeCardTypeList: ['101', '102', '103'],
        inputDateLimit: 'noLimit',
        // 周期
        selectedPeriod: 'day',
        monthInterval: 1,
        dayInterval: 1,
        hourInterval: 1,
        minuteInterval: 0,
        selectedWeekday: 'Monday',
        upgradeTime: 'range',
        birthday: 'range',
        consumptionTime: 'range',
        benefitLimit: false,
        consumptionLimit: false,
        lastConsumptionTimeLimit: false,
        upgradeLimit: false,
        birthdayLimit: false
      },
      //申请部门选择
      inDeptList: [{
        'value': '02',
        'label': '群光广场(成都)',
        'bmjb': 1,
        'children': [{
          'value': '0201',
          'label': '稽核室',
          'bmjb': 2
        }, {
          'value': '0203',
          'label': '营业一部',
          'bmjb': 2,
          'children': [{
            'value': '020301',
            'label': '国际精品课',
            'bmjb': 3
          }, {
            'value': '020302',
            'label': '仕女名品课',
            'bmjb': 3
          }]
        }, {
          'value': '0204',
          'label': '营业二部',
          'bmjb': 2,
          'children': [{
            'value': '020401',
            'label': '少女服饰课',
            'bmjb': 3
          }, {
            'value': '020402',
            'label': '淑女内衣课',
            'bmjb': 3
          }]
        }, {
          'value': '0205',
          'label': '营业三部',
          'bmjb': 2,
          'children': [{
            'value': '020501',
            'label': '运动休闲课',
            'bmjb': 3
          }, {
            'value': '020502',
            'label': '亲子童乐课',
            'bmjb': 3
          }, {
            'value': '020504',
            'label': '绅士服饰课',
            'bmjb': 3
          }]
        }, {
          'value': '0206',
          'label': '营业四部',
          'bmjb': 2,
          'children': [{
            'value': '020601',
            'label': '超级市场课',
            'bmjb': 3
          }, {
            'value': '020602',
            'label': '生活美食课',
            'bmjb': 3
          }]
        }, {
          'value': '0207',
          'label': '电商运营',
          'bmjb': 2,
          'children': [{
            'value': '020701',
            'label': '电商运营课',
            'bmjb': 3
          }]
        }, {
          'value': '020201',
          'label': '店长办公室',
          'bmjb': 3,
          'children': [{
            'value': '02020102',
            'label': '行政公关课',
            'bmjb': 4
          }, {
            'value': '02020103',
            'label': '商品管理课',
            'bmjb': 4
          }]
        }, {
          'value': '020202',
          'label': '财务部',
          'bmjb': 3,
          'children': [{
            'value': '02020201',
            'label': '财务课',
            'bmjb': 4
          }, {
            'value': '02020202',
            'label': '会计课',
            'bmjb': 4
          }, {
            'value': '02020204',
            'label': '收银课',
            'bmjb': 4
          }]
        }, {
          'value': '020203',
          'label': '行政管理部',
          'bmjb': 3,
          'children': [{
            'value': '02020301',
            'label': '工务课',
            'bmjb': 4
          }, {
            'value': '02020302',
            'label': '保卫清洁课',
            'bmjb': 4
          }, {
            'value': '02020303',
            'label': '总务课',
            'bmjb': 4
          }]
        }, {
          'value': '020205',
          'label': '信息部',
          'bmjb': 3,
          'children': [{
            'value': '02020501',
            'label': '信息课',
            'bmjb': 4
          }]
        }, {
          'value': '020206',
          'label': '贩卖促进部',
          'bmjb': 3,
          'children': [{
            'value': '02020602',
            'label': '活动企划课',
            'bmjb': 4
          }, {
            'value': '02020603',
            'label': '视觉陈列课',
            'bmjb': 4
          }, {
            'value': '02020605',
            'label': '顾客服务课',
            'bmjb': 4
          }, {
            'value': '02020606',
            'label': '电商运营课',
            'bmjb': 4
          }]
        }, {
          'value': '020207',
          'label': '人力资源部',
          'bmjb': 3,
          'children': [{
            'value': '02020701',
            'label': '人资管理课',
            'bmjb': 4
          }]
        }, {
          'value': '020208',
          'label': '顾客管理部',
          'bmjb': 3,
          'children': [{
            'value': '02020801',
            'label': '会员管理课',
            'bmjb': 4
          }, {
            'value': '02020802',
            'label': '顾客服务课',
            'bmjb': 4
          }]
        }]
      }],
      // 组织架构
      treeData: [],
      treeProps: {
        label: 'label',
        disabled: this.disabledFn
      },
      checkedNodes: [],
      checkedIds: [],
      rules: {
        name: [
          { required: true, message: '任务名称必填', trigger: 'blur' }
        ],
        notes: [
          { required: true, message: '任务执行场景描述必填', trigger: 'blur' }
        ],
        taskTypeList: [
          { required: true, message: '任务类型必选', trigger: 'change' }
        ],
        exeTime: [
          { required: true, message: '任务执行时间必填', trigger: 'blur' }
        ],
        cardTypeList: [
          { required: true, message: '会员卡别必选', trigger: 'change' }
        ],
        inputDateStart: [
          { required: true, message: '注册时间区间起始未选择', trigger: 'blur' }
        ],
        inputDateEnd: [
          { required: true, message: '注册时间区间截止未选择', trigger: 'blur' }
        ],
        ageStart: [
          { required: true, message: '年龄起始必填', trigger: 'blur' }
        ],
        ageEnd: [
          { required: true, message: '年龄截止必填', trigger: 'blur' }
        ],
        benefitStart: [
          { required: true, message: '剩余积分起始必填', trigger: 'blur' }
        ],
        benefitEnd: [
          { required: true, message: '剩余积分截止必填', trigger: 'blur' }
        ],
        consumptionTimeStart: [
          { required: true, message: '消费时间起始必填', trigger: 'blur' }
        ],
        consumptionTimeEnd: [
          { required: true, message: '消费时间截止必填', trigger: 'blur' }
        ],
        consumptionAmountStart: [
          { required: true, message: '金额必填', trigger: 'blur' }
        ],
        consumptionAmountEnd: [
          { required: true, message: '金额必填', trigger: 'blur' }
        ],
        consumptionRanking: [
          { required: true, message: '排名必填', trigger: 'blur' }
        ],
        lastConsumptionTimeStart: [
          { required: true, message: '时间必选', trigger: 'blur' }
        ],
        lastConsumptionTimeEnd: [
          { required: true, message: '时间必选', trigger: 'blur' }
        ],
        upgradeTimeStart: [
          { required: true, message: '时间必选', trigger: 'blur' }
        ],
        upgradeTimeEnd: [
          { required: true, message: '时间必选', trigger: 'blur' }
        ],
        upgradeCardTypeList: [
          { required: true, message: '目标卡别必选', trigger: 'change' }
        ],
        birthdayStart: [
          { required: true, message: '时间必选', trigger: 'blur' }
        ],
        birthdayEnd: [
          { required: true, message: '时间必选', trigger: 'blur' }
        ],
        treeSelection: [
          { required: true, validator: this.validateTreeSelection, trigger: 'change' }
        ],
        smsId: [
          { required: true, message: '短信模板必选', trigger: 'blur' }
        ],
        couponId: [
          { required: true, message: '通联卡券必选', trigger: 'blur' }
        ],
        textData: [
          { required: true, message: '手机号必填', trigger: 'blur' }
        ],

        deptid: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        contracttype: [
          { required: true, message: '请选择合同类型', trigger: 'change' }
        ],
        paytype: [
          { required: true, message: '请选择付款类型', trigger: 'change' }
        ],
        firmname: [
          { required: true, message: '请填写厂商名称', trigger: 'blur' }
        ]
      },
      // 查看表单时
      checkedKeys: [],
      justRead: false
    }
  },
  created() {
    this.hdlList()
    this.getFee()
  },
  mounted() {
    this.getDeptList()
  },
  filters: {
    formatDate(timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  },
  methods: {
    /**
     * 加载收费标准
     */
    // 初始化数据
    async getFee() {
      try {
        const res = await this.feeApi.config()
        this.fee = res.data
      } catch (error) {
        console.error(error)
      }
    },
    disabledFn() {
      return this.justRead
    },
    /**
     * 指定名单相关
     */
    handleBlur() {
      if (!this.justRead) {
        this.phonenumber = this.dataForm.textData.toString().split(',')
        this.handleImport(this.dataForm.textData.toString())
        this.canEdit = false
        this.canSee = true
        this.confirm = false
      }
    },
    beforeUpload(file) {
      this.fileList = [file]
      console.log('选择了文件beforeUpload')
      const extension = file.name.split('.')[1] === 'txt'
      const extension2 = file.name.split('.')[1] === 'xls'
      const extension3 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        console.log('上传模板大小不能超过 2MB!')
        this.$message({
          message: '上传模板大小不能超过 2MB!',
          type: 'error'
        })
      }
      if (!extension && !extension2 && !extension3) {
        this.$message({
          message: '上传模板只能是 txt、xls、xlsx格式!',
          type: 'error'
        })
      }
      return false
    },
    handleChange(file, filelist) {
      const extension = file.name.split('.')[1] === 'txt'
      const extension2 = file.name.split('.')[1] === 'xls'
      const extension3 = file.name.split('.')[1] === 'xlsx'
      if (extension) {
        // console.log(file, 'txt')
        this.read(file.raw)
        // return false
      } else if (extension2 || extension3) {
        // console.log(file, 'excel')
        this.readExcel(file)
      }

      // this.tableData = results
      // this.tableHeader = header
    },
    handleImport(cont) {
      this.dataForm.textData = []
      this.wrongnum = []
      this.showWrong = false
      // console.log('handleImport:' + cont)
      let arrys = cont.split(',')
      if (arrys.length === 1) {
        // console.log('arrays1')
        cont = cont.replace(/\n/g, ',')
        arrys = cont.split(',')
      }
      // console.log(arrys)
      this.phonenumber = arrys
      this.phonenumber = this.distinct(this.phonenumber)
      // console.log(this.phonenumber)
      this.phonenumber.forEach((v) => {
        console.log(this)
        if (this.isPhone(v) === true) {
          this.dataForm.textData.push(v)
          // console.log('TextData:' + this.textData + '|' + this.textData.length)
        } else {
          this.wrongnum.push(v)
          this.showWrong = true
          this.canSee = true
        }
      })
      const x = arrys.length - this.phonenumber.length
      this.txtVal = '共' + this.dataForm.textData.length + '个可用手机号码'
      if (x > 0) {
        this.txtVal += ',有' + x + '个号码重复'
      }
      if (this.wrongnum.length > 0) {
        this.txtVal += ',有' + this.wrongnum.length + '个号码不是标准手机号码'
      }
    },
    distinct(arr) {
      return Array.from(new Set(arr))
    },
    handleClean() {
      this.phonenumber = []
      this.phonenumber2 = []
      this.dataForm.textData = []
      this.txtVal = ''
      this.canEdit = true
      this.wrongnum = []
      this.showWrong = false
      this.canSee = false
      this.confirm = true
    },
    read(f) {
      const rd = new FileReader()
      rd.onload = e => {
        let cont = rd.reading({ encode: 'GBK' })
        cont = cont.replace(/\r\n/g, ',')
        this.handleImport(cont)
      }
      this.canEdit = false
      rd.readAsBinaryString(f)
    },
    readExcel(obj) {
      console.log('选择了文件readExcel')
      const _this = this
      // 通过DOM取文件数据
      this.file = obj.raw
      const rABS = false // 是否将文件读取为二进制字符串
      const file = this.file
      const reader = new FileReader()
      FileReader.prototype.readAsBinaryString = function(f) {
        let binary = ''
        const rABS = false // 是否将文件读取为二进制字符串
        let wb // 读取完成的数据
        let outdata
        function fixdata(data) { // 文件流转BinaryString
          var o = ''
          var l = 0
          var w = 10240
          for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
          o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
          return o
        }
        const reader = new FileReader()
        reader.onload = function(e) {
          const bytes = new Uint8Array(reader.result)
          const length = bytes.byteLength
          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i])
          }
          const XLSX = require('xlsx')
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              // 手动转化
              type: 'base64'
            })
          } else {
            wb = XLSX.read(binary, {
              type: 'binary'
            })
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) // outdata就是你想要的东西

          this.phonenumber = outdata
          this.phonenumber.forEach((v) => {
            this.phonenumber2 = Object.values(v)
            // console.log(arr, 'arr')
            this.phonenumber2.forEach((x) => {
              // console.log(x, 'x')
              if (_this.isPhone(x.toString()) === true) {
                _this.dataForm.textData.push(x.toString())
                // console.log('TextData:' + this.textData + '|' + this.textData.length)
              } else {
                _this.wrongnum.push(x.toString())
                _this.showWrong = true
                _this.canSee = true
              }
            })
          })
        }
        reader.readAsArrayBuffer(f)
      }
      if (rABS) {
        reader.readAsArrayBuffer(file)
      } else {
        reader.readAsBinaryString(file)
      }
    },
    isPhone(value) {
      const reg = /^((\+|00)86)?1[3-9]\d{9}$/
      // console.log('vaule', value, 'length', value.length)
      if (value.length === 11) {
        console.log(value + ':' + reg.test(value))
        return reg.test(value)
      } else {
        return false
      }
      // l consoLe.Log ( reg)
    },
    /**
     * 其他方法
     */
    // 监听手机模板
    changeSms(value) {
      console.log('手机短信', value)
      this.dataForm.smsId = value
    },
    // 监听优惠券列表
    changeCouponList(list) {
      console.log('优惠券', list)
      this.dataForm.couponChooseList = list
    },
    // 楼层选择rule
    validateTreeSelection(rule, value, callback) {
      const checkedNodes = this.$refs.tree.getCheckedNodes()
      if (checkedNodes && checkedNodes.length > 0) {
        callback()
      } else {
        callback(new Error('请选择楼层'))
      }
    },
    dateFormat(item) {
      if (item) {
        this.listQuery.createTime1 = item[0]
        this.listQuery.createTime2 = item[1]
      } else {
        this.listQuery.createTime1 = ''
        this.listQuery.createTime2 = ''
      }
    },
    // 打开新建窗口
    handleOpen(newForm) {
      this.active = 'first'
      this.other = 1
      this.justRead = false
      this.hdlOpen(newForm)
    },
    // 新增事件
    handleCreate() {
      console.log('handleCreate')
      // if (this.dataForm.consumptionLimit) {
      //   this.handleGetCheckedIds()
      // }
      if (this.dataForm.consumptionAmountStart) {
        console.log('调用方法')
        this.dataForm.consumptionAmountStart = Number(this.dataForm.consumptionAmountStart)
        this.dataForm.consumptionAmountEnd = Number(this.dataForm.consumptionAmountEnd)
      }
      this.dataForm.cardType = this.dataForm.cardTypeList.toString()
      this.dataForm.taskType = this.dataForm.taskTypeList.toString()
      this.dataForm.textData = this.dataForm.textData.toString()
      this.dataForm.upgradeCardType = this.dataForm.upgradeCardTypeList.toString()
      console.log(this.dataForm)
      this.hdlCreate()
    },
    // 打开修改弹窗
    handleEdit(row) {
      this.other = 1
      console.log(row)
      this.checkedKeys.length = 0
      const { deptCodes, taskType, upgradeCardType, cardType, status } = row
      if (taskType) {
        row.taskTypeList = taskType.split(',')
      }
      if (upgradeCardType) {
        row.upgradeCardTypeList = upgradeCardType.split(',')
      }
      if (cardType) {
        row.cardTypeList = cardType.split(',')
      }
      // 设置部门树状结构数据
      if (deptCodes) {
        const deptCodeList = deptCodes.split(',')
        deptCodeList.forEach(deptCode => {
          this.traverse(this.treeData, node => {
            if (node.id.startsWith(deptCode)) { // 如果节点的 id 以 '02030110' 开头，则将该节点及其所有子节点添加到已勾选的节点列表中
              this.traverse([node], subNode => {
                this.checkedKeys.push(subNode.id)
              })
            }
          })
        })
      }
      // 只读
      this.justRead = true
      this.hdlEdit(row)
    },
    // 获取消费楼层
    handleGetCheckedIds() {
      // 获取所有选中的节点
      const checkedNodes = this.$refs.tree.getCheckedNodes()
      const checkedIds = checkedNodes.map(node => node.id)
      // console.log('精简前', checkedIds)

      // 精简数组
      const result = checkedIds.filter((item, index) => {
        for (let i = 0; i < checkedIds.length; i++) {
          if (i !== index && item.startsWith(checkedIds[i])) {
            return false
          }
        }
        return true
      })
      this.dataForm.deptCodes = result.toString()
      console.log('精简后', result)
    },
    test() {
      this.handleGetCheckedIds()
      console.log(this.dataForm)
    },
    traverse(data, fn) {
      data.forEach(node => {
        fn(node)
        if (node.children) {
          this.traverse(node.children, fn)
        }
      })
    },
    handleRadioChange() {
      console.log(this.other) // 获取当前切换的label值
      // 查看详情时带出
      if (this.dialogStatus === 'update' && this.other === 2 && this.dataForm.consumptionLimit) {
        this.$refs.tree.setCheckedKeys(this.checkedKeys)
      }
    },
    // 撤销申请
    abate(code) {
      const self = this
      self.$confirm('是否确认撤销申请？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        self.api.abate({
          'code': code
        }).then(res => {
          // 通知信息
          self.$u.msg(res.data)
          self.dialogFormVisible = false
          self.hdlList()
        })
      })
    },
    // 终止任务
    stopTask(code) {
      const self = this
      self.$confirm('是否确认终止任务？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        self.api.stopTask({
          'code': code
        }).then(res => {
          if (res.data > 0) {
            self.$u.msg('终止成功！')
            this.dialogFormVisible = false
          }
          self.hdlList()
        })
      })
    },
    mySave() {
      console.log('保存')
      if (this.dataForm.consumptionAmountStart) {
        this.dataForm.consumptionAmountStart = Number(this.dataForm.consumptionAmountStart)
        this.dataForm.consumptionAmountEnd = Number(this.dataForm.consumptionAmountEnd)
      }
      this.dataForm.cardType = this.dataForm.cardTypeList.toString()
      this.dataForm.taskType = this.dataForm.taskTypeList.toString()
      this.dataForm.textData = this.dataForm.textData.toString()
      this.dataForm.upgradeCardType = this.dataForm.upgradeCardTypeList.toString()
      const self = this
      // 效验数据格式
      self.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          // 提交更新数据
          self.api.update(self.dataForm).then(() => {
            self.$u.msg('修改成功！')
            // 刷新数据列表
            self.hdlList()
            self.justRead = true
          })
        }
      })
    },
    myApply(code) {
      const self = this
      self.$confirm('是否确认发起流程？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        self.api.submit({
          'code': code
        }).then(res => {
          if (res.data > 0) {
            self.$u.msg('发起流程成功！')
            self.dialogFormVisible = false
          }
          self.hdlList()
        })
      })
    },
    /**
     * 扣款相关
     */
    // 加载部门
    getDeptList() {
      const self = this
      // 扣款部门
      self.api.deptList({
        'level': 2
      }).then(res => {
        this.deptList = res.data
      })
      // 消费楼层
      self.api.deptListNoManage({
        'level': 4
      }).then(res => {
        this.treeData = res.data
      })
    },
    // 编辑功能:监听组织变化
    handledeptChanged(value, label) {
      const self = this
      self.dataForm.deptname = this.$refs['depts'].getCheckedNodes()[0].label
      self.dataForm.deptid = this.$refs['depts'].getCheckedNodes()[0].value
    },
    // 处理合同类型改变事件
    handleContracttypeChanged(value) {
      if (value === '第三方承担') {
        this.dataForm.paytype = '现金缴款'
      } else if (this.dataForm.paytype === '') {
        this.dataForm.paytype = '账扣'
      }
    },
    // 获取厂商信息
    hdlfirmcode() {
      const self = this
      this.dataForm.firmname = ''
      self.api.firmName(self.dataForm).then(res => {
        this.dataForm.firmname = res.data
      })
    },
    // 打开厂商资料弹窗
    handleFCInfos() {
      const self = this
      if (self.dataForm.deptname === '') {
        self.$message.error('请先选择扣款部门！')
        return
      }
      self.api.fcInfos(self.dataForm).then(res => {
        this.fcInfoData = res.data
        this.searchfcInfoData = res.data
      })
      self.fcInfotable = true
    },
    // 厂商弹窗选择功能
    getFirm(row) {
      const self = this
      self.dataForm.firmcode = row.firmcode
      self.dataForm.firmname = row.firmname
      self.dataForm.hth = row.contractcode
      self.dataForm.zgid = row.deptid
      self.dataForm.zgname = row.dept_name
      self.dataForm.brandname = row.spsb
      self.fcInfotable = false
    },
    // 输入关键字
    keyWordChange() {
      const self = this
      // 表格用原表格的数据 即 用于搜索的总数据
      // self.fcInfoData = self.searchfcInfoData
      const _search = self.keyWord
      const newListData = [] // 用于存放搜索出来数据的新数组
      if (self.keyWord !== '') {
        // filter 过滤数组
        this.searchfcInfoData.filter((item) => {
          // newListData中 没有查询的内容，就添加到newListData中
          if (
            item.firmname.indexOf(_search) !== -1 ||
            item.firmcode.indexOf(_search) !== -1 ||
            item.deptid.indexOf(_search) !== -1 ||
            item.dept_name.indexOf(_search) !== -1
          ) {
            newListData.push(item)
          }
        })
        this.fcInfoData = newListData
      } else {
        self.fcInfoData = self.searchfcInfoData
      }
    },
    // 申请部门
    handleCascaderChange(value) {
      this.listQuery.inDeptId = value[value.length - 1] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-container {
  width: 460px; /* 设置容器宽度 */
  max-height: 300px; /* 设置容器高度 */
  overflow: auto; /* 设置容器超出部分滚动 */
  background-color: #f8f8f8;
}

.el-tree {
  max-width: 100%; /* 设置树形结构最大宽度为容器宽度 */
  max-height: 100%; /* 设置树形结构最大高度为容器高度 */
  background-color: #f8f8f8;
  padding:10px 0px;
}

.el-input-group__text {
  background-color: #f5f7fa;
  border-left: 1px solid #dcdfe6;
  color: #909399;
  padding: 0 8px;
}
.item{
  float:left;
  margin-right: 10px;
  border: 1px solid #CCCCCC;
  background-color: #F5F7FA;
}
td {
  border: none;
  padding: 10px;
  width:200px;
}
</style>
